<template>
  <q-load-icon v-if="loading" />
  <view class="pa-3" v-else>
    <view class="bdrs-8 ov-h">
      <q-item label="地址" arrow>
        <view class="flex-1">
          <q-pick-location v-model="form.area_info" />
        </view>
      </q-item>
      <q-item label="门牌号">
        <input
          class="flex-1"
          type="text"
          placeholder="请输入门牌号"
          v-model="form.detail"
        />
      </q-item>

      <q-item label="收货人">
        <input
          class="flex-1"
          type="text"
          placeholder="请输入名字"
          v-model="form.name"
        />
      </q-item>
      <q-item label="手机号">
        <input
          class="flex-1"
          type="text"
          placeholder="请输入手机号"
          v-model="form.phone"
        />
      </q-item>
    </view>

    <view class="mt-8">
      <u-button type="primary" :loading="saving" @click="onSave">保存</u-button>
    </view>
    <view class="mt-3" v-if="id && !saving">
      <u-button
        type="error"
        plain
        :customStyle="{
          background: 'none',
        }"
        @click="onDel"
        >删除</u-button
      >
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState(["userInfo", "pickAddr"]),
  },
  data() {
    return {
      id: null,
      loading: false,
      form: {
        name: "",
        phone: "",
        area_info: {},
        detail: "",
      },
      info: {},
      saving: false,
    };
  },
  onLoad({ id }) {
    this.id = id;
    const title = id ? "编辑地址" : "新增地址";
    uni.$h.setTitle(title);
    this.getInfo();
  },
  methods: {
    async onDel() {
      await this.$confirm("是否确认删除？");
      await this.onUpdate({
        id: this.id,
        _delete: true,
      });
    },
    async onSave() {
      let body = { ...this.form };
      let msg = "";
      if (!body.area_info.title) {
        msg = "请选择地址";
      } else if (!body.detail) {
        msg = "请输入单元门牌号";
      } else if (!body.name) {
        msg = "请输入收货人姓名";
      } else if (!body.phone) {
        msg = "请输入手机号";
      } else if (!/^1\d{10}$/.test(body.phone)) {
        msg = "请输入正确的手机号";
      }
      if (msg) {
        return this.$toast(msg);
      }
      if (!this.id) {
        body.user_id = 1;
      } else {
        body = uni.$h.getChanged(body, this.info);
        if (!body) {
          return this.$toast("无更新");
        }
        body.id = this.id;
      }
      this.onUpdate(body);
    },
    async onUpdate(body) {
      try {
        this.saving = true;
        const { data } = await uni.$api.post(
          "/data/auth/upsert/user_addr",
          body
        );
        this.$toast(body._delete ? "已删除" : "已保存", 1);
        let pickAddr = data;
        if (body._delete) {
          pickAddr = {};
        }
        this.$setStore({
          pickAddr,
        });
        await this.$sleep(500);
        this.$navBack();
      } catch (error) {
        console.log(error);
        this.saving = false;
      }
    },
    async getInfo() {
      if (!this.id) {
        this.form = {
          ...this.form,
          name: this.userInfo.user_metadata?.nickname,
          phone: this.userInfo.phone,
        };
        return;
      }
      try {
        this.loading = true;
        const { data } = await uni.$api.get(
          "/data/item/user_addr?id=" + this.id
        );
        console.log(data);
        this.info = data;
        const form = {};
        for (const key in this.form) {
          form[key] = data[key];
        }
        this.form = form;
      } catch (error) {
        console.log(error);
      }
      this.loading = false;
    },
  },
};
</script>
